<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link th:href="@{/static/css/layui/layui.css}" rel="stylesheet">
        <link th:href="@{/static/css/style.css}" rel="stylesheet">
        <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/static/css/layer/layer.css}" rel="stylesheet">
        <link th:href="@{/static/css/layui/admin.css}" rel="stylesheet">
        <link th:href="@{/static/css/element-ui.2.13.0.css}" rel="stylesheet">
        <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/static/utils/nprogress/nprogress.css}" rel="stylesheet"/>
        <style scoped>
            .filter-item {
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div class="layui-fluid" id="app">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div class="layui-card">
<!--                        <span style="margin-left: 92%" @click="addMenu()" class="btn btn-primary">导入</span>-->
                        <el-button type="primary" class="filter-item" @click="showDialog">导入ICD模型</el-button>
                        <div class="layui-card-body">
                            <div class="layui-card-body">
                                <el-table
                                        :data="tableData"
                                        style="width: 100%;margin-bottom: 20px;fontSize:'15px'"
                                        row-key="id"
                                        border
                                        default-expand-all
                                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<!--                                    <el-table-column-->
<!--                                            width="150"-->
<!--                                            prop="fileName"-->
<!--                                            label="文件名称"-->
<!--                                            align="center">-->
<!--                                    </el-table-column>-->
                                    <el-table-column
                                            width="150"
                                            prop="iedName"
                                            label="IED名称"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="iedDesc"
                                            label="ied描述"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            width="150"
                                            prop="iedIp"
                                            label="ip地址"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            width="100"
                                            prop="iedState"
                                            :formatter="formatShow"
                                            label="通信状态"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            width="200"
                                            prop="updateStateTimestamp"
                                            label="通信状态更新时间"
                                            align="center">
                                    </el-table-column>
<!--                                    <el-table-column-->
<!--                                            width="220"-->
<!--                                            prop="createTime"-->
<!--                                            label="创建时间"-->
<!--                                            align="center">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            width="200"-->
<!--                                            prop="updateTime"-->
<!--                                            label="更新时间"-->
<!--                                            align="center">-->
<!--                                    </el-table-column>-->

                                    <el-table-column width="250" label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="handleEdit(scope.row)">编辑
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    @click="handleConfig(scope.row)">启动配置
                                            </el-button>
                                            <el-button width="150"
                                                    size="mini"
                                                    type="danger"
                                                    @click="handleDelete(scope.row,tableData)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-pagination
                                        background
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        layout="prev,pager,next,sizes"
                                        :page-sizes="[5, 10, 15, 20]"
                                        :page-size="page_size"
                                        :current-page="current_page"
                                        :total="total">
                                </el-pagination>
                            </div>
                            <!--添加--导入icd文件弹窗-->
                            <el-dialog
                                    title="icd文件上传"
                                    :visible.sync="dialogVisible"
                                    width="30%"
                            >
                                <el-upload
                                        class="upload"
                                        :action="uploadAction"
                                        accept=".icd"
                                        :headers="headers"
                                        list-type="picture"
                                        :show-file-list="false"
                                        :before-upload="beforeUpload"
                                        :on-success="uploadSuccess"
                                        :on-error="uploadError"
                                        :on-progress="uploadProgress"
                                >
                                    <el-button
                                            v-loading="buttonLoading"
                                            class="filter-item"
                                            icon="el-icon-upload2"
                                            type="success"
                                            plain
                                    >
                                        导入
                                    </el-button>
                                </el-upload>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            var context = [[@{
                /}]];
        </script>
        <script th:src="@{/static/utils/nprogress/nprogress.js}"></script>
        <script th:src="@{/static/js/jquery.1.12.4.min.js}"></script>
        <script th:src="@{/static/js/layui/layui.js}"></script>
        <script th:src="@{/static/js/jquery.validate.min.js}"></script>
        <script th:src="@{/static/js/layui/lay/modules/layer.js}"></script>
        <script th:src="@{/static/js/vue.2.6.11.js}"></script>
        <script th:src="@{/static/js/element-ui.2.13.0.js}"></script>
        <script th:src="@{/static/js/modules/ICDImportConfig/config.js}" type="module"></script>
    </body>
</html>